/* 普通脚本内容 */
// 删除节点
node_name = document.getElementById("node");
$("#delete_node").click(function() {
    $.ajax({
        url: '/graph/delete/', //请求地址
        type: "GET",       //请求类型
        data: {             //发送数据  键值对形式
            node_name: node_name.innerText,
        },
        success: function (data) {
            alert('删除成功');  //回调函数
            document.yourFormName.reset();
            window.location.reload();
        }
    })
});

// 页面全局点击事件
$($("body")).click(
    () => {
        // 设计变化样式
        $("#addNodeBox").css('z-index', '-1');
        $("#addNodeBox").css('opacity', '0');
        $("#addEdgeBox").css('z-index', '-1');
        $("#addEdgeBox").css('opacity', '0');
        $("#changeBox").css('z-index', '-1');
        $("#changeBox").css('opacity', '0');

        // 设计背景变化
        $("#blackScreen").css('opacity', '0');
        $("#blackScreen").css('z-index', '-1');

        // 设计按钮组能否点击状态
        $("#addNodeSubmit").attr("disabled", true);
        $("#addEdgeSubmit").attr("disabled", true);
        $("#changeBoxSubmit").attr("disabled", true);
    }
);

// 按钮组点击事件
$($("#add_node")).click(
    (event) => {
        $("body").click();

        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        // 设计背景变化
        $("#blackScreen").css('opacity', '1');
        $("#blackScreen").css('z-index', '2');

        // 设计变化样式
        $("#addNodeBox").css('z-index', '3');
        $("#addNodeBox").css('opacity', '1');

        $("#addNodeSubmit").attr("disabled", false);
    }
);
$($("#add_edge")).click(
    (event) => {
        $("body").click();

        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        // 设计背景变化
        $("#blackScreen").css('opacity', '1');
        $("#blackScreen").css('z-index', '2');

        // 设计变化样式
        $("#addEdgeBox").css('z-index', '3');
        $("#addEdgeBox").css('opacity', '1');

        $("#addEdgeSubmit").attr("disabled", false);
    }
);
$($("#update_node")).click(
    (event) => {
        $("body").click();

        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        // 设计背景变化
        $("#blackScreen").css('opacity', '1');
        $("#blackScreen").css('z-index', '2');

        // 设计变化样式
        $("#changeBox").css('z-index', '3');
        $("#changeBox").css('opacity', '1');

        $("#changeBoxSubmit").attr("disabled", false);
    }
);

// 表单组点击事件
$($("#addNodeBox")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件
    }
);
$($("#addEdgeBox")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件
    }
);
$($("#changeBox")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件
    }
);

// 表单组按钮点击事件
$($("#addNodeSubmit")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        // 获取指定标签
        let nodeName = $("input[name='add_node_name']");
        let nodeIdentifier = $("input[name='add_identifier']");

        // 获取输入值
        let nodeNameText = nodeName.val();
        let nodeIdentifierText = nodeIdentifier.val();

        // 切片获取对应的结构数据
        let nodeBook = nodeIdentifierText.slice(0, 3);
        let nodeChapter = nodeIdentifierText.slice(3, 5);
        let nodeSummary = nodeIdentifierText.slice(5, 7);

        // 切片获取对应的结构数据
        let nodeBookNum = Number(nodeBook);
        let nodeChapterNum = Number(nodeChapter);
        let nodeSummaryNum = Number(nodeSummary);

        // 判断结构并添加到侧边菜单栏，注： eq()下标从0开始
        if (nodeSummaryNum != 0) {
            if (nodeSummaryNum > 1 && nodeChapterNum > 1) {
                // $($(".bookMenu div").eq(nodeChapterNum - 2)).children("div").eq(nodeSummaryNum - 2).append(
                //     "<div class=\"summaryMenu\"><p>"+ nodeNameText +"</p></div>"
                // );
            // } else if (nodeSummaryNum == 1 && nodeChapterNum > 1) {
            //     $($(".bookMenu div").eq(nodeChapterNum - 2)).children("p").append(
            //         "<div class=\"summaryMenu\"><p>"+ nodeNameText +"</p></div>"
            //     );
            } else if (nodeSummaryNum > 1 && nodeChapterNum == 1) {
                // $($(".bookMenu div").eq(0)).children("div").eq(nodeSummaryNum - 2).append()(
                //     "<div class=\"summaryMenu\"><p>"+ nodeNameText +"</p></div>"
                // );
                ////// 筛选有错
            // } else {
            //     $(".bookMenu div").children("p").children("span").prepend(
            //         "<i class=\"fa fa-chevron-right\"></i>"
            //     );
            //
            //     $($(".bookMenu div").eq(0)).children("p").append(
            //         "<div class=\"summaryMenu\"><p>"+ nodeNameText +"</p></div>"
            //     );
            }
        } else {
            if (nodeChapterNum != 1){
                $(".bookMenu div").eq(nodeChapterNum - 2).append(
                    "<div class=\"chapterMenu hasClick\"><p><span>" + nodeNameText + "</span></p></div>"
                );
            } else {
                $(".bookMenu").children("p").append(
                    "<div class=\"chapterMenu hasClick\"><p><span>" + nodeNameText + "</span></p></div>"
                );
            }
            // alert("执行了")
        }

        // console.log(nodeBook);
        // console.log(nodeChapter);
        // console.log(nodeSummary);
        // console.log(nodeBookNum);
        // console.log(nodeChapterNum);
        // console.log(nodeSummaryNum);
        // alert("5");
    }
);

        $("#addNodeSubmit").attr("disabled", true);
        $("#addEdgeSubmit").attr("disabled", true);
        $("#changeBoxSubmit").attr("disabled", true);

// 菜单栏点击事件
$($(".bookMenu>p")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        //$(".bookMenu>p>i").css('transform', 'rotate(' + 90 + 'deg)');

        if ($(".bookMenu").hasClass("hasClick")){
            $(".bookMenu").removeClass("hasClick");
            $(".bookMenu>p>i").css('transform', 'rotate(' + 90 + 'deg)');
        } else {
            $(".bookMenu").addClass("hasClick");
            $(".bookMenu>p>i").css('transform', 'rotate(' + 0 + 'deg)');
        }
    }
);
$($(".chapterMenu>p")).click(
    (event) => {
        event.stopPropagation();    // 阻止事件上浮导致异步触发 body 点击事件

        if ($(".chapterMenu").hasClass("hasClick")){
            $(".chapterMenu").removeClass("hasClick");
            $(".chapterMenu>p>i").css('transform', 'rotate(' + 90 + 'deg)');
        } else {
            $(".chapterMenu").addClass("hasClick");
            $(".chapterMenu>p>i").css('transform', 'rotate(' + 0 + 'deg)');
        }
    }
);


/* Echars控制脚本内容 */
// 获取 <script> 传入的属性数据
let data = JSON.parse(document.getElementById("indexJs").getAttribute("echars_data"));
let links = JSON.parse(document.getElementById("indexJs").getAttribute("echars_link"));

// 获取echarts容器
let myChart = echarts.init(document.getElementById('graph'));

// 设定echarts配置表
option = {
    title: {
        text: '知识图谱',
        textAlign: 'left'
    },

    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    label: {
        normal: {
            show: true,
            textStyle: {
                fontSize: 12
            },
        }
    },
    legend: {
        x: "center",
        show: false
    },
    series: [
        {
            type: 'graph',  //关系图
            name : "knowledge_graph", //系列名称，用于tooltip的显示
            layout: 'force',  //图的布局，类型为力导图，
            symbolSize: 45,
            focusNodeAdjacency: true,  //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            draggable:true,  //节点是否可拖拽，只在使用力引导布局的时候有用
            roam: true,  //是否开启鼠标缩放和平移漫游
            edgeSymbol: ['none', 'arrow'],  //边两端的标记类型，
            show:true,
            categories: [{
                name: '查询实体',
                itemStyle: {
                    normal: {
                        color: "#979806",
                    }
                }
            }, {
                name: 'instance',
                itemStyle: {
                    normal: {
                        color: "#4992FF",
                    }
                }
            }, {
                name: 'class',
                itemStyle: {
                    normal: {
                        color: "#C11564",
                    }
                }
            }],
            label: {
                normal: {
                    show: true,
                    textStyle: {  //标签的字体样式
                        fontSize: 12,  //字体大小
                    },
                }
            },
            force: {
                repulsion: 1000
            },

            edgeSymbolSize: [4, 50],  //边两端的标记大小，可以是一个数组分别指定两端，也可以是单个统一指定。
            edgeLabel: {           //文本标签
                normal: {
                    show: true,   //是否显示标签。
                    textStyle: {   //标签的字体样式
                         fontStyle : 'normal',//文字字体的风格 'normal'标准 'italic'斜体 'oblique' 倾斜
                        fontSize: 10   //文字大小
                    },
                    formatter: "{c}"
                }
            },

            data: data,
            links: links,
            lineStyle: {
                normal:{
                    color:"#262626",
                    width: 1,
                    curveness: 0,
                    type: 'solid',
                }

            }
        }
    ]
};

// 加载配置表
myChart.setOption(option);

// 自适应响应式布局
$(window).resize(function() {
    // echarts窗口变化后响应事件
    myChart.resize();
});

// echarts点击事件
myChart.on('click', function (params) {
    // console.log(params);
    if (params.dataType === 'edge') {
        // 点击到graph的edge上
        let edge_name = document.getElementById('edge');
        let source = document.getElementById('source');
        let target = document.getElementById('target');

        //将params中的信息放到需要显示的盒子中
        edge_name.innerHTML = params.data.value;
        source.innerHTML = params.data.source;
        target.innerHTML = params.data.target;

        // 切换显示信息
        $('#edgeData').css('z-index', '1');
        $('#edgeData').css('opacity', '1');
        $('#nodeData').css('z-index', '0');
        $('#nodeData').css('opacity', '0');
    } else if(params.dataType === 'node') {
        // 点击到graph的node上
        let node_name = document.getElementById('node');
        let belong_to = document.getElementById('belong_to');
        let desc = document.getElementById('desc');

        // 显示内容在顶部
        node_name.innerHTML = params.data.name;
        belong_to.innerHTML = params.data.value.belong_to;
        desc.innerHTML = params.data.value.desc;

        //显示内容在修改的表单中
        let update_node_name = document.getElementById('update_node_name');
        let update_belong_to = document.getElementById('update_belong_to');
        let update_desc = document.getElementById('update_desc');
        let update_category = document.getElementById('update_category');
        let update_identifier = document.getElementById('update_identifier');

        // 显示在表单中
        update_node_name.value = params.data.name;   //这里的node_name是唯一标识符，不能修改
        update_belong_to.value = params.data.value.belong_to;
        update_desc.value = params.data.value.desc;
        update_category.value = params.data.category;
        update_identifier.value = params.data.identifier;

        // 切换显示信息
        $('#nodeData').css('z-index', '1');
        $('#nodeData').css('opacity', '1');
        $('#edgeData').css('z-index', '0');
        $('#edgeData').css('opacity', '0');
    }
});